<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input class="filter-item" v-model="listQuery.inn_id" placeholder="锦江酒店ID" style="width: 220px;" clearable size="small"/>

      <el-button class="filter-item" type="primary" @click="handleFilter" size="small">搜索</el-button>
    </div>

    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column label="ID" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>

      <el-table-column label="锦江酒店ID" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.inn_id }}
        </template>
      </el-table-column>
      <el-table-column label="图片说明" min-width="120" align="center">
        <template slot-scope="scope">
          {{ scope.row.image_des||"-" }}
        </template>
      </el-table-column>
      <el-table-column label="图片类型" min-width="110" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.image_type === 1">酒店图片</span>
          <span v-else-if="scope.row.image_type === 2">客房图片</span>
          <span v-else-if="scope.row.image_type === 3">酒店外观</span>
          <span v-else-if="scope.row.image_type === 4">酒店大堂</span>
          <span v-if="scope.row.image_type === 5">酒店娱乐设施</span>
          <span v-else-if="scope.row.image_type === 6">酒店餐饮设施</span>
          <span v-else-if="scope.row.image_type === 7">酒店服务设施</span>
          <span v-else-if="scope.row.image_type === 8">酒店休闲设施</span>
          <span v-if="scope.row.image_type === 9">其他</span>
          <span v-else-if="scope.row.image_type === 10">公共区域</span>
          <span v-else-if="scope.row.image_type === 11">周边景点</span>
        </template>
      </el-table-column>
      <el-table-column label="图片" min-width="120" align="center">
        <template slot-scope="scope">
          <img :src="scope.row.image_url" style="width:120px;height:80px">
        </template>
      </el-table-column>

      <el-table-column label="主图" min-width="110" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.master === 0" type="warning">否</el-tag>
          <el-tag v-else-if="scope.row.master === 1" type="success">是</el-tag>
          <el-tag v-else type="primary">无类型</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="房型" min-width="120" align="center">
        <template slot-scope="scope">
          {{ scope.row.room_type_code||"-" }}
        </template>
      </el-table-column>
      <el-table-column label="图片大小" min-width="120" align="center">
        <template slot-scope="scope">
          {{ scope.row.size_type||"-" }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" min-width="160" align="center">
        <template slot-scope="scope">
          {{ scope.row.created_at }}
        </template>
      </el-table-column>

<!--      <el-table-column label="操作" width="250" align="center" fixed="right" class-name="small-padding fixed-width">-->
<!--        <template slot-scope="scope">-->
<!--          <el-button type="warning" size="mini" @click="handleSalesRoomType(scope.row)">售卖房型</el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>

    <div class="pagination-container">
      <el-pagination :current-page="listQuery.page" :page-sizes="[5,10,20,30,50]" :page-size="listQuery.limit" :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script>
  import request from "@/utils/request";

  export default {
    data() {
      return {
        list: null,
        total: null,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 10,
          hotel_name: "",
          basic_room_type_name: "",
        },
      };
    },
    created() {
      this.getList();
    },
    methods: {
      getList() {
        this.listLoading = true;
        request({
          url: "/api/backend/hotel/hotelImageList",
          method: "get",
          params: this.listQuery,
        }).then(response => {
          this.list = response.data.items;
          this.total = response.data.total;
          this.listLoading = false;
        });
      },
      handleFilter() {
        this.listQuery.page = 1;
        this.getList();
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      },
      // 售卖房型
      handleSalesRoomType(row) {
        this.$router.push(`/salesRoomTypeList?basic_room_type_id=${row.id}`);
      },
    }
  };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>
